<template>
  <el-dialog
    :model-value="modelValue"
    :title="dialogTitle"
    width="40%"
    @update:modelValue="$emit('update:modelValue', $event)"
  >
    <div v-if="result">
      <!-- 分享 -->
      <div v-if="type === 'share'">
        <p>您正在分享结果: <strong>{{ result.name }}</strong></p>
        <el-form label-position="top">
          <el-form-item label="生成分享链接">
            <el-input :value="shareLink" readonly>
              <template #append>
                <el-button @click="copyLink">复制</el-button>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="设置有效期">
            <el-radio-group v-model="expiry">
              <el-radio :label="7">7天</el-radio>
              <el-radio :label="30">30天</el-radio>
              <el-radio :label="0">永久有效</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>

      <!-- 删除 -->
      <div v-if="type === 'delete'">
        <p>
          <el-icon color="#E6A23C" style="vertical-align: middle; margin-right: 5px;"><WarningFilled /></el-icon>
          您确定要删除结果 <strong>"{{ result.name }}"</strong> 吗？
        </p>
        <p class="delete-warning">此操作不可恢复，将永久删除相关的所有数据和文件。</p>
      </div>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('update:modelValue', false)">取消</el-button>
        <el-button v-if="type === 'share'" type="primary" @click="confirmShare">确认分享</el-button>
        <el-button v-if="type === 'delete'" type="danger" @click="confirmDelete">确认删除</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { WarningFilled } from '@element-plus/icons-vue';

const props = defineProps({
  modelValue: Boolean,
  result: Object,
  type: {
    type: String, // 'share' or 'delete'
    required: true,
  },
});
const emit = defineEmits(['update:modelValue']);

const expiry = ref(7);
const shareLink = computed(() => {
  if (props.result) {
    return `https://your-platform.com/results/share?id=${props.result.id}&token=mock_token_${Date.now()}`;
  }
  return '';
});

const dialogTitle = computed(() => {
  if (props.type === 'share') return '分享结果';
  if (props.type === 'delete') return '删除确认';
  return '';
});

const copyLink = () => {
  navigator.clipboard.writeText(shareLink.value).then(() => {
    ElMessage.success('链接已复制到剪贴板');
  });
};

const confirmShare = () => {
  ElMessage.success('分享链接已生成！');
  emit('update:modelValue', false);
};

const confirmDelete = () => {
  // 在这里执行删除逻辑
  ElMessage.success(`结果 "${props.result.name}" 已被删除。`);
  emit('update:modelValue', false);
  // 可能还需要触发一个事件来刷新列表
};
</script>

<style scoped>
.delete-warning {
  color: #F56C6C;
  font-size: 12px;
  margin-top: 10px;
}
</style>